<template>
    <div class="headerbox">
      <div class="header">
        <div class="headerL" @click="goBack">
          <a class="goback"><img src="/assets/images/goback.png" /></a>
        </div>
        <div class="headerC0">
          <div class="ssdiv">
            <img src="/assets/images/ss.png" />
            <input
              name=""
              type="text"
              placeholder="输入关键字..."
              v-model="keywords"
              @change="getListData"
            />
          </div>
        </div>
        <div class="headerR" @click="show = true">
          <a href="javascript:void()"><img src="/assets/images/tr.png" /></a>
        </div>
      </div>
    </div>
  
    <div class="clear"></div>
    <div class="shopType">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="flag"
          :options="option1"
          @change="getListData"
        />
        <van-dropdown-item
          v-model="order"
          :options="option2"
          @change="getListData"
        />
      </van-dropdown-menu>
    </div>
    <div class="clear"></div>
    <div class="hbox"></div>
    <div class="mainWarp" style="background: #f3f3f3">
      <ul class="proul">
        <li v-for="item in list" :key="item.id">
          <router-link :to="{ path: '/product/info', query: { proid: item.id } }"
            ><img :src="item.thumb_text"
          /></router-link>
          <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
            <p class="tit">
              {{ item.name }}
            </p></router-link
          >
          <div class="price">
            <p>￥{{ item.price }}<span></span></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
    <van-popup
      v-model:show="show"
      position="right"
      :style="{ width: '20%', height: '100%' , margin: '50px 0px' }"
    >
      <van-sidebar>
        <van-sidebar-item
          :title="item.name"
          v-for="item in typelist"
          :key="item.id"
          @click="toPagelist(item.id)"
        />
      </van-sidebar>
    </van-popup>
  </template>
  <script setup>
  const flag = ref("0");
  const order = ref("");
  const option1 = [
    { text: "全部商品", value: "0" },
    { text: "新款商品", value: "1" },
    { text: "热销商品", value: "2" },
    { text: "推荐商品", value: "3" },
  ];
  const option2 = [
    { text: "默认排序", value: "" },
    { text: "价格排序", value: "price" },
    { text: "库存排序", value: "stock" },
  ];
  const route = useRoute();
  const typeid = ref(route.query.typeid ?? 0);
  const keywords = ref("");
  const show = ref(false);
  const goBack = () => {
    history.back();
  };
  const list = ref([]);
  const typelist = ref([]);
  onBeforeMount(() => {
    getListData();
  });
  const getListData = async () => {
    let data = {
      typeid: typeid.value,
      keywords: keywords.value,
      flag: flag.value,
      order: order.value,
    };
    let result = await Api.productList(data);
    if (result.code == 1) {
      list.value = result.data;
    }
    let res = await Api.productType();
    if (result.code == 1) {
      typelist.value = res.data;
      typelist.value.unshift({
        name: "全部",
        id: "",
      });
    }
  };
  const toPagelist = (id) => {
    typeid.value = id;
    show.value = false;
    getListData();
  };
  </script>